<template>
  <v-col cols="12" :md="size === 2 ? 6 : size === 3 ? 4 : undefined">
    <base-card
      :height="value.prominent ? 450 : 350"
      color="grey lighten-1"
      href="#!"
    >
      <v-img
        :src="value.cover"
        height="100%"
        gradient="rgba(0, 0, 0, .72), rgba(0, 0, 0, .02)"
      >
        <v-row v-if="!value.prominent" class="fill-height text-right ma-0">
          <v-col cols="12">
            <v-chip
              label
              class="mx-0 mb-2 chiptext"
              color="grey darken-3"
              small
              @click.stop="$router.push(path)"
            >
              {{ value.category }}
            </v-chip>

            <h3 class="title font-weight-bold mb-2 cardtext">
              {{ value.title }}
            </h3>

            <div class="caption cardtext">
              {{ value.author }}<br />{{ value.updatedAt | transday}}
            </div>
          </v-col>
          <div class="tocenter">
            <v-btn
              class="mx-2"
              fab
              dark
              x-large
              color="grey"
              text
              :href="path + '/' + value._id"
            >
              <v-icon dark x-large>mdi-play</v-icon>
            </v-btn>
          </div>

          <v-col align-self="end">
            <v-menu
              open-on-hover
              offset-y
              top 
            >
              <template v-slot:activator="{ on }">
                 <v-btn
                  dark
                  v-on="on"
                  width="45%"
                  text
                  class="btns"
                >
                <v-spacer />
                  更多
                </v-btn>
              </template>
              <v-list color="#CFD8DC">
                <v-list-item
                  v-for="(item, index) in links"
                  :key="index"
                >
                  <v-list-item-title><a :href="item" target="_blank">{{ value.title+'--'+`${index+1}` }}</a></v-list-item-title>
                </v-list-item>
              </v-list>
            </v-menu>
          </v-col>
        </v-row>
      </v-img>
    </base-card>
  </v-col>
</template>

<script>
export default {
  name: 'FeedCard',

  props: {
    size: {
      type: Number,
      required: true,
    },
    value: {
      type: Object,
      default: () => ({}),
    },
  },

  data: () => ({
    menu: false,
    path:'',
    links: []
  }),

  methods: {
    remakeValue() {
      if (this.value.category === '记录片') {
        this.path = '/documentary'
      } else if (this.value.category === '对话') {
        this.path = '/talk'
      } else if (this.value.category === '人物') {
        this.path = '/personage'
      } else if (this.value.category === '观点') {
        this.path = '/viewpoint'
      } else {
        this.path = '#!'
      }
      this.links = this.value.link.split(',')
    },
  },
  created() {
    this.remakeValue()
  },
}
</script>

<style>
.v-image__image {
  transition: 0.3s linear;
}
.cardtext {
  color: #ffffff;
}
.tocenter {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.cardtext:hover{
  color: rgb(190, 22, 22);
}
.chiptext{
  color: white;
}
.chiptext:hover{
  color: rgb(13, 146, 30);
}
.btns:hover{
  color: rgb(6, 25, 131);
}
</style>
